@include('components.head')
<body>
<style>
    thead tr {
        background-color: #eeeeeea1;
    }
</style>
<div class="pear-container">
    {{--筛选--}}
    @if(isset($search_forms) && count($search_forms))
        @include('components.search_form', $search_forms)
    @endif

    {{--表格--}}
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="list-table" lay-filter="list-table" lay-size="sm"></table>
        </div>
    </div>
</div>

{{--表工具栏--}}
@if(isset($top_btns) && count($top_btns))
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            @foreach($top_btns as $top_btn)
                {!! create_btn_by_code($top_btn['code'], $top_btn['params'] ?? []) !!}
            @endforeach
        </div>
    </script>
@endif

{{--表操作--}}
@if(isset($row_btns) && count($row_btns))
    <script type="text/html" id="list-bar">
        <div class="layui-btn-group">
            @foreach($row_btns as $row_btn)
                {!! create_btn_by_code($row_btn['code'], $row_btn['params'] ?? []) !!}
            @endforeach
        </div>
    </script>
@endif
<!-- 依 赖 脚 本 -->
<script src="/pearAdmin/component/layui/layui.js"></script>
<script src="/pearAdmin/component/pear/pear.js"></script>
<script>
    var listTable
    layui.use(['jquery', 'table', 'dropdown', 'form', 'baseAdmin', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var dropdown = layui.dropdown;
        var baseAdmin = layui.baseAdmin;

        baseAdmin.init();

        // 创建渲染实例
        listTable = table.render({
            elem: '#list-table',
            url: '{!! $uri !!}',
            toolbar: '#toolbar',
            defaultToolbar: ['filter', 'exports', 'print'],
            height: 'full-35', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: false, // 开启合计行
            page: true,
            cols:  @json($cols),
            done: function () {
            },
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 工具栏
        table.on('toolbar(list-table)', function (obj) {
            switch (obj.event) {
                // 弹窗
                case 'open':
                    let url = $(this).attr('request-uri');
                    let title = $(this).attr('title');
                    baseAdmin.layerOpen(title, url);
                    break;
                // 操作
                case 'operate':
                    break;
            }
        });

        // 列按钮点击
        table.on('tool(list-table)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            if (obj.event === 'open') {
                let url = $(this).attr('request-uri') + '&id=' + data.id;
                let title = $(this).attr('title');
                baseAdmin.layerOpen(title, url);
            } else if (obj.event === 'operate') {
                let url = $(this).attr('request-uri') + '&id=' + data.id;
                let title = $(this).attr('title');
                baseAdmin.layerConfirm(title, [data.id], url);
            } else if (obj.event === 'more') {
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: data.btns,
                    click: function (menudata) {
                        console.log(menudata);
                        if (menudata.id === 'account-delete') {
                            baseAdmin.layerConfirm(menudata.title, [data.id], menudata.uri);
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });

        // 搜索
        form.on('submit(query)', function (obj) {
            tableSearch(obj.field);
            return false;
        });
    });

    function tableReload() {
        listTable.reloadData({});
    }

    function tableSearch(where) {
        listTable.reloadData({
            where: where,
            page: {
                curr: 1
            }
        })
    }
</script>
</body>
